<template>
  <div class="sim">
<!--    内联样式设置字体大小、行高，并使该<div>成为弹性布局容器，允许子元素换行显示。-->
    <div style="font-size: 18px;line-height: 2;display: flex; flex-wrap: wrap;">
      <!-- 使用 v-for 指令来循环渲染相同结构的内容 -->
<!--      flex: 1 1 50%;-->
<!--      当有额外的空间时，该项目将尝试填充50%的父元素宽度。-->
<!--      当空间不足时，该项目将按比例缩小。-->
<!--      在没有额外空间也没有空间不足的情况下，该项目的宽度将是其父元素宽度的50%。-->
      <div v-for="(item, index) of items" :key="index" style="display: flex; align-items: center; flex: 1 1 50%;">
        <span :class="['ball', 'color' + (index % 18 + 1)]" />
        <div class="ball-label">
          {{ item.label }}<span style="color: #1890ff">{{ item.count }}</span>项
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ShDb",
  data() {
    return {
      // 假设的数据，实际应用中应该从后端获取或通过其他方式动态生成
      items: [
        { label: '国家专利总数（授权）：', count: 22 },
        { label: '发明专利总数（授权）：', count: 22 },
        { label: '实用专利总数（授权）：', count: 22 },
        { label: '外观设计总数（授权）：', count: 22 },
        { label: '水利水电工程：', count: 22 },
        { label: '机电制造安装：', count: 22 },
        { label: '土木房屋建筑：', count: 22 },
        { label: '港口与航道工程：', count: 22 },
        { label: '装备智能化：', count: 22 },
        { label: '软件著作权总数：', count: 22 },
        { label: '发明专利申请中：', count: 22 },
        { label: '实用专利申请中：', count: 22 },
        { label: '外观专利申请中：', count: 22 },
        { label: '市政路桥工程：', count: 22 },
        { label: '其他工程：', count: 22 },
        { label: '轨道交通工程：', count: 22 },
        { label: '环境与生态工程：', count: 22 },
        { label: '系能源工程：', count: 22 },
      ]
    }
  }
}
</script>

<style scoped>
/* 审核待办中的颜色小圆球 */
.ball {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
}
.color1 {
  background-color: #5181FF;
}
.color2 {
  background-color: #958BFF;
}
.color3 {
  background-color: #faad14;
}
.color4 {
  background-color: #FF688D;
}
.color5 {
  background-color: #00DACE;
}
.color6 {
  background-color: #1F46AE;
}
.color7 {
  background-color: #32DF24;
}
.color8 {
  background-color: #EC4F56;
}
.color9 {
  background-color: #E39C2D;
}
.color10 {
  background-color: #A5CE15;
}
.color11 {
  background-color: #943DDD;
}
.color12 {
  background-color: #D11ED6;
}
.color13 {
  background-color: #68ff70;
}
.color14 {
  background-color: #faad14;
}
.color15 {
  background-color: #ffffad;
}
.color16 {
  background-color: #53d2ff;
}
.color17 {
  background-color: #ff3fb5;
}
.color18 {
  background-color: #d6491e;
}
.sim {
  overflow-y: auto !important;
  height: 100%;
}
</style>
